<template>
  <div class="container">
    <div class="table-container">
      <TitleAndContent
        :obj="{
          title: '评估模型列表',
          img: require('@/assets/images/task.png'),
        }"
      >
        <div class="content-padding">
          <el-form
            ref="historyForm"
            :inline="true"
            size="mini"
            :model="modelForm"
            class="demo-form-inline"
            style="display: flex; justify-content: flex-start"
          >
            <el-form-item label="创建时间" prop="createTime">
              <el-date-picker
                v-model="modelForm.createTime"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <el-select v-model="modelForm.type" placeholder="类型" clearable>
                <el-option label="类型一" value="shanghai"></el-option>
                <el-option label="类型二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="评估模型名称" prop="name">
              <el-input
                v-model="modelForm.name"
                placeholder="评估模型名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchBtn">
                <img
                  :src="require('@/assets/images/cha3.png')"
                  alt=""
                  srcset=""
                />
                查询
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            :data="modelList"
            border
            stripe
            size="mini"
            height="200"
            show-overflow-tooltip
            highlight-current-row
            v-loading="modelListLoading"
          >
            <el-table-column
              type="index"
              align="center"
              width="120"
              label="序号"
            >
            </el-table-column>
            <el-table-column prop="code" align="center" label="编号">
            </el-table-column>
            <el-table-column prop="name" align="center" label="评估模型名称">
            </el-table-column>
            <el-table-column prop="type" align="center" label="评估模型类型">
            </el-table-column>
            <el-table-column prop="updateTime" align="center" label="创建时间">
            </el-table-column>
            <el-table-column prop="createBy" align="center" label="创建人员">
            </el-table-column>
            <el-table-column align="center" label="评估模型详情">
              <template slot-scope="scope">
                <el-button size="small" @click="getDetail(scope.row.id)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <el-table-column align="center" label="评估模型维护">
              <template slot-scope="scope">
                <el-button size="small" @click="goUpdata(scope.row.id)"
                  >修改</el-button
                >
                <el-button size="small" @click="deleteModel(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="modelTotal"
            :current-page="modelCurrPage"
            @current-change="changeModelPage"
            style="text-align: right"
          >
          </el-pagination>
        </div>
      </TitleAndContent>
    </div>
    <div class="g6-container">
      <TitleAndContent
        :obj="{
          title: '评估模型详情',
          img: require('@/assets/images/jisuan.png'),
        }"
      >
        <!-- <div class="graph" id="mountNode"></div> -->
        <g6-container
          v-if="g6Tree && JSON.stringify(g6Tree) != '{}'"
          class="graph"
          :treedata="g6Tree"
        ></g6-container>
      </TitleAndContent>
    </div>
  </div>
</template>
<script>
import TitleAndContent from "@/components/myselfCom/titleAndContent";
import G6Container from "@/components/G6Container/index";
import {
  getModelByStatus,
  selectModelTreeById,
  queryById,
  queryModelById,
  deleteModel,
} from "@/api/accessModel.js";
export default {
  name: "",
  components: { TitleAndContent, G6Container },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      g6Tree: {},
      modelForm: {
        createTime: ["", ""],
        type: "",
        name: "",
      },
      modelListLoading: false,
      modelList: [],
      modelCurrPage: 1,
      modelTotal: 0,
    };
  },
  methods: {
    searchBtn() {
      this.modelListLoading = true;
      const params1 = {
        status: 2,
        name: this.modelForm.name,
        type: this.modelForm.type,
        startTime: this.modelForm.createTime[0],
        endTime: this.modelForm.createTime[1],
        pageNo: this.modelCurrPage,
        pageSize: 10,
      };
      getModelByStatus(params1).then((res) => {
        if (res.code == 200) {
          console.log(res, "弹窗数据获取");
          this.modelListLoading = false;
          this.modelList = res.data.records;
          this.modelTotal = res.data.total;
        }
      });
    },
    changeModelPage(pageNo) {
      this.modelCurrPage = pageNo;
      this.searchBtn();
    },
    getDetail(id) {
      this.g6Tree = {};
      selectModelTreeById(id).then((res) => {
        if (res.code == 200) {
          this.g6Tree = res.data;
          this.formatTree(this.g6Tree);
        }
      });
    },
    goUpdata(id) {
      this.$router.push({ path: "/accessModel", query: { id } });
    },
    deleteModel(id) {
      this.$confirm("删除后无法恢复，确认删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteModel({ id }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$modal.msgSuccess("删除成功");
            this.searchBtn();
          }
        });
      });
    },
    formatTree(node) {
      if (!node) {
        return;
      }
      node.size = [120, 50];
      // console.log(node);
      node.num = node.num? node.num.toString(): '0';
      if (node.children && node.children.length) {
        var i = 0;
        for (i = 0; i < node.children.length; i++) {
          this.formatTree(node.children[i]);
        }
      }
    },
  },
  created() {},
  mounted() {
    this.searchBtn();
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  .table-container {
    height: 60%;
  }
  .g6-container {
    height: 40%;
  }
}
.content-padding {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  .el-table {
    flex: 1;
  }
}
::v-deep .el-table__header-wrapper th {
  background-color: rgba(54, 112, 245, 0.05);
  color: #65769d;
  font-size: 14px;
}
</style>
